<%--
  Created by IntelliJ IDEA.
  User: chenxiaojun
  Date: 2020/6/8
  Time: 9:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加商品</title>
    <%@include file="/common/header.jsp"%>
    <style type="text/css">
        .cd{
            margin: 20px auto 0px auto;
            width: 80%;
        }
        .img{
            width:200px;
            height:200px;
            background-repeat:no-repeat;
            background-size:cover;
            background-position:center;
        }
    </style>
</head>
<body>
<div id="root" style="border: 1px white solid">
    <Card class="cd">
        <template>
            <p>当前正在进行第 {{ current + 1 }} 步</p>
            <Steps :current="current">
                <Step title="添加方式"></Step>
                <Step title="商品"></Step>
                <Step title="SKU库存"></Step>
            </Steps>

        </template>
        <i-form :label-width="80"  v-show="current==0">


            <Form-Item label="选择添加方式">
                <Radio-Group v-model="mode">
                    <Radio :label="0">
                        <span>手动输入</span>
                    </Radio>
                    <Radio :label="1">
                        <span>从供应商选择</span>
                    </Radio>
                </Radio-Group>
            </Form-Item>
            <i-Button type="primary" @click="next">下一步</i-Button>
        </i-form>
        <div  v-show="mode==1">
            <i-form :label-width="80"  v-show="current==1">
                <Form-Item label="商品分类">
                    <i-Select v-model="Commodity.productCategoryId" clearable  style="width: 120px;">
                        <i-Option v-for="item in sortList" :value="item.id" :key="item.id" v-if="item.sortDisplay==1">{{item.sortName}}</i-Option>
                    </i-Select>
                </Form-Item>
                <Form-Item label="商品品牌">
                    <i-Select v-model="Commodity.brandId" clearable  style="width: 120px;" @on-change="supp">
                        <i-Option v-for="item in brandList" :value="item.id" :key="item.id" v-if="item.showStatus==1">{{item.name}}</i-Option>
                    </i-Select>
                </Form-Item>
                <Form-Item label="供应商">
                    <i-Select v-model="Commodity.supplierId" clearable  style="width: 120px;" @on-change="supCom" @on-clear="as">
                        <i-Option v-for="item in supplierList" :value="item.id" :key="item.id" v-if="item.state==1">{{item.name}}</i-Option>
                    </i-Select>
                </Form-Item>
                <Form-Item label="选择商品">
                    <i-Select v-model="Commodity.name" clearable  style="width: 120px;" @on-change="sc">
                        <i-Option v-for="item in supComList" :value="item.name" :key="item.name" >{{item.name}}</i-Option>
                    </i-Select>
                    <i-button @click="aaa">aa</i-button>
                </Form-Item>

                <%--<Form-Item label="商品名称">--%>
                    <%--<i-input v-model="Commodity.name"></i-input>--%>
                <%--</Form-Item>--%>
                <Form-Item label="商品售价">
                    <i-input v-model="Commodity.price"></i-input>
                </Form-Item>
                <Form-Item label="商品库存">
                    <i-input v-model="Commodity.stock"></i-input>
                </Form-Item>
                <Form-Item label="商品库存预警值">
                    <i-input v-model="Commodity.lowStock"></i-input>
                </Form-Item>
                <Form-item label="商品图片:">
                    <Upload action="/sys/brand/upload" name="attach" :before-upload="handlerBeforeUpload" :multiple="false" :on-success="uploadSuccess" ref="upload">
                        <i-Button icon="ios-cloud-upload-outline">上传图片</i-Button>
                    </Upload>
                    <div class="img" :style="{'background-image':'url(' + img +')'}" v-if="img"></div>
                </Form-item>
                <Form-Item label="商品单位">
                    <i-input v-model="Commodity.unit"></i-input>
                </Form-Item>
                <Form-Item label="商品排序">
                    <i-input v-model="Commodity.sort"></i-input>
                </Form-Item>
                <i-Button type="primary" @click="previous()">上一步</i-Button>
                <i-Button type="primary" @click="next">下一步</i-Button>
            </i-form>
            <div v-show="current==2">


                <Checkbox-Group v-model="stockVo.stockColor">
                    <Checkbox label="黑色">黑色</Checkbox>
                    <Checkbox label="金色">金色</Checkbox>
                    <Checkbox label="红色">红色</Checkbox>
                    <Checkbox label="银色">银色</Checkbox>
                    <Checkbox label="蓝色">蓝色</Checkbox>
                    <Checkbox label="浅蓝色">浅蓝色</Checkbox>
                    <Checkbox label="灰色">灰色</Checkbox>
                    <Checkbox label="白色">白色</Checkbox>
                </Checkbox-Group><br>
                <Checkbox-Group v-model="stockVo.stockBranch" v-if="Commodity.productCategoryId==1">
                    <Checkbox label="L">L</Checkbox>
                    <Checkbox label="XL">XL</Checkbox>
                    <Checkbox label="XXL">XXL</Checkbox>
                    <Checkbox label="XXXL">XXXL</Checkbox>
                </Checkbox-Group>
                <Checkbox-Group v-model="stockVo.stockBranch" v-if="Commodity.productCategoryId==2">
                    <Checkbox label="16">16G</Checkbox>
                    <Checkbox label="32">32G</Checkbox>
                    <Checkbox label="64">64G</Checkbox>
                </Checkbox-Group>
                <Checkbox-Group v-model="stockVo.stockBranch" v-if="Commodity.productCategoryId==3">
                    <Checkbox label="56英寸">56英寸</Checkbox>
                    <Checkbox label="68英寸">68英寸</Checkbox>
                </Checkbox-Group>
                <Checkbox-Group v-model="stockVo.stockBranch" v-if="Commodity.productCategoryId==4">
                    <Checkbox label="38码">38码</Checkbox>
                    <Checkbox label="39码">39码</Checkbox>
                    <Checkbox label="40码">40码</Checkbox>
                </Checkbox-Group>
                <Checkbox-Group v-model="stockVo.stockBranch" v-if="Commodity.productCategoryId==5">
                    <Checkbox label="29">29</Checkbox>
                    <Checkbox label="30">30</Checkbox>
                    <Checkbox label="31">31</Checkbox>
                    <Checkbox label="32">32</Checkbox>
                    <Checkbox label="33">33</Checkbox>
                    <Checkbox label="34">34</Checkbox>
                </Checkbox-Group>

                <i-button  @click="aShua">刷新</i-button>
                <i-form >
                    <i-table stripe :columns="columns1" :data="data">
                        <template slot-scope="{row,index}" slot="stockCode">
                            <Form-Item label="库存编号">
                                <i-input v-model="data[index].stockCode"></i-input>
                            </Form-Item>
                        </template>
                        <template slot-scope="{row,index}" slot="c">
                            <i-Button type="error" size="large" @click="del(row,index)">删除</i-Button>
                        </template>
                        <template slot-scope="{row,index}" slot="stockMoney">
                            <Form-Item label="价格">
                                <i-input v-model="data[index].stockMoney"></i-input>
                            </Form-Item>
                        </template>
                        <template slot-scope="{row,index}" slot="stockNumber">
                            <Form-Item label="库存数量">
                                <i-input v-model="data[index].stockNumber"></i-input>
                            </Form-Item>
                        </template>
                        <template slot-scope="{row,index}" slot="stockPolice">
                            <Form-Item label="库存警示">
                                <i-input v-model="data[index].stockPolice"></i-input>
                            </Form-Item>
                        </template>
                    </i-table>
                </i-form>
                <i-Button type="primary" @click="previous()">上一步</i-Button>
                <i-Button type="primary" @click="add()">完成</i-Button>
            </div>
        </div>



        <div  v-show="mode==0">
            <i-form :label-width="80"  v-show="current==1">
                <Form-Item label="商品分类">
                    <i-Select v-model="Commodity.productCategoryId" clearable  style="width: 120px;">
                        <i-Option v-for="item in sortList" :value="item.id" :key="item.id" v-if="item.sortDisplay==1">{{item.sortName}}</i-Option>
                    </i-Select>
                </Form-Item>
                <Form-Item label="商品品牌">
                    <i-Select v-model="Commodity.brandId" clearable  style="width: 120px;" @on-change="supp">
                        <i-Option v-for="item in brandList" :value="item.id" :key="item.id" v-if="item.showStatus==1">{{item.name}}</i-Option>
                    </i-Select>
                </Form-Item>
                <%--<Form-Item label="供应商">--%>
                    <%--<i-Select v-model="Commodity.supplierId" clearable  style="width: 120px;" @on-change="supCom">--%>
                        <%--<i-Option v-for="item in supplierList" :value="item.id" :key="item.id" v-if="item.state==1">{{item.name}}</i-Option>--%>
                    <%--</i-Select>--%>
                <%--</Form-Item>--%>
                <%--<Form-Item label="选择商品">--%>
                    <%--<i-Select v-model="Commodity.name" clearable  style="width: 120px;" @on-change="sc">--%>
                        <%--<i-Option v-for="item in supComList" :value="item.id" :key="item.id" >{{item.name}}</i-Option>--%>
                    <%--</i-Select>--%>
                <%--</Form-Item>--%>
                <Form-Item label="商品名称">
                    <i-input v-model="Commodity.name"></i-input>
                </Form-Item>
                <Form-Item label="商品售价">
                    <i-input v-model="Commodity.price"></i-input>
                </Form-Item>
                <Form-Item label="商品库存">
                    <i-input v-model="Commodity.stock"></i-input>
                </Form-Item>
                <Form-Item label="商品库存预警值">
                    <i-input v-model="Commodity.lowStock"></i-input>
                </Form-Item>
                <Form-item label="商品图片:">
                    <Upload action="/sys/brand/upload" name="attach" :before-upload="handlerBeforeUpload" :multiple="false" :on-success="uploadSuccess" ref="upload1">
                        <i-Button icon="ios-cloud-upload-outline">上传图片</i-Button>
                    </Upload>
                    <div class="img" :style="{'background-image':'url(' + img +')'}" v-if="img"></div>
                </Form-item>
                <Form-Item label="商品单位">
                    <i-input v-model="Commodity.unit"></i-input>
                </Form-Item>
                <Form-Item label="商品排序">
                    <i-input v-model="Commodity.sort"></i-input>
                </Form-Item>
                <i-Button type="primary" @click="previous()">上一步</i-Button>
                <i-Button type="primary" @click="next">下一步</i-Button>
            </i-form>
            <div v-show="current==2">


                <Checkbox-Group v-model="stockVo.stockColor">
                    <Checkbox label="黑色">黑色</Checkbox>
                    <Checkbox label="金色">金色</Checkbox>
                    <Checkbox label="红色">红色</Checkbox>
                    <Checkbox label="银色">银色</Checkbox>
                    <Checkbox label="蓝色">蓝色</Checkbox>
                    <Checkbox label="浅蓝色">浅蓝色</Checkbox>
                    <Checkbox label="灰色">灰色</Checkbox>
                    <Checkbox label="白色">白色</Checkbox>
                </Checkbox-Group><br>
                <Checkbox-Group v-model="stockVo.stockBranch" v-if="Commodity.productCategoryId==1">
                    <Checkbox label="L">L</Checkbox>
                    <Checkbox label="XL">XL</Checkbox>
                    <Checkbox label="XXL">XXL</Checkbox>
                    <Checkbox label="XXXL">XXXL</Checkbox>
                </Checkbox-Group>
                <Checkbox-Group v-model="stockVo.stockBranch" v-if="Commodity.productCategoryId==2">
                    <Checkbox label="16">16G</Checkbox>
                    <Checkbox label="32">32G</Checkbox>
                    <Checkbox label="64">64G</Checkbox>
                </Checkbox-Group>
                <Checkbox-Group v-model="stockVo.stockBranch" v-if="Commodity.productCategoryId==3">
                    <Checkbox label="56英寸">56英寸</Checkbox>
                    <Checkbox label="68英寸">68英寸</Checkbox>
                </Checkbox-Group>
                <Checkbox-Group v-model="stockVo.stockBranch" v-if="Commodity.productCategoryId==4">
                    <Checkbox label="38码">38码</Checkbox>
                    <Checkbox label="39码">39码</Checkbox>
                    <Checkbox label="40码">40码</Checkbox>
                </Checkbox-Group>
                <Checkbox-Group v-model="stockVo.stockBranch" v-if="Commodity.productCategoryId==5">
                    <Checkbox label="29">29</Checkbox>
                    <Checkbox label="30">30</Checkbox>
                    <Checkbox label="31">31</Checkbox>
                    <Checkbox label="32">32</Checkbox>
                    <Checkbox label="33">33</Checkbox>
                    <Checkbox label="34">34</Checkbox>
                </Checkbox-Group>

                <i-button  @click="aShua">刷新</i-button>
                <i-form >
                    <i-table stripe :columns="columns1" :data="data">
                        <template slot-scope="{row,index}" slot="stockCode">
                            <Form-Item label="库存编号">
                                <i-input v-model="data[index].stockCode"></i-input>
                            </Form-Item>
                        </template>
                        <template slot-scope="{row,index}" slot="c">
                            <i-Button type="error" size="large" @click="del(row,index)">删除</i-Button>
                        </template>
                        <template slot-scope="{row,index}" slot="stockMoney">
                            <Form-Item label="价格">
                                <i-input v-model="data[index].stockMoney"></i-input>
                            </Form-Item>
                        </template>
                        <template slot-scope="{row,index}" slot="stockNumber">
                            <Form-Item label="库存数量">
                                <i-input v-model="data[index].stockNumber"></i-input>
                            </Form-Item>
                        </template>
                        <template slot-scope="{row,index}" slot="stockPolice">
                            <Form-Item label="库存警示">
                                <i-input v-model="data[index].stockPolice"></i-input>
                            </Form-Item>
                        </template>
                    </i-table>
                </i-form>
                <i-Button type="primary" @click="previous()">上一步</i-Button>
                <i-Button type="primary" @click="add()">完成</i-Button>
            </div>
        </div>
    </Card>
</div>

<script>
    new Vue({
        el:"#root",
        data:{
            current:0,
            columns1:[
                {title:"库存编号",slot:"stockCode"},
                {title:"颜色",key:"stockColor"},
                {title:"区别",key:"stockBranch"},
                {title:"价格",slot:"stockMoney"},
                {title:"数量",slot:"stockNumber"},
                {title:"库存预警",slot:"stockPolice"},
                {title:"操作",slot:"c"},
            ],
            stockVo:{},
            csVo:{},

            columns:[],
            data: [],
            sortList: [],
            brandList:[],
            Commodity:{},
            Stock:{},
            uploadFlag:false,
            img:null,
            supplierList:[],
            supComList:[],
            mode:{},
        },
        mounted(){
            this.getsort();
            this.getbrand();
            this.getSup();
            // this.getSupCom()
        },
        methods: {
            sc(){

            },
            supp(){
                this.getSup();
            },
            aaa(){
              alert(this.Commodity.name)
            },
            as(){
                this.Commodity.supplierId={};
                this.getSupCom();
            },
            supCom(){
                this.getSupCom();
            },

            getSupCom(){
                axios.post("/sup/sup/getSupCom",this.Commodity).then(
                    ({data})=>{
                        this.supComList = data.result;
                    }
                )
            },
            getSup(){
                axios.post("/sup/sup/getSupp",this.Commodity).then(
                    ({data})=>{
                        this.supplierList = data.result;
                    }
                )
            },
            aShua() {
                axios.post("/sys/com/aShua", this.stockVo).then(
                    ({data}) => {
                        this.data = data.result;
                    }
                )
            },
            del(row,index){

                this.csVo.stocks = this.data;
                this.csVo.stock = row;
                axios.post("/sys/com/del",this.csVo).then(
                    ({data})=>{
                        this.data = data.result;
                    }
                )
            },
            getsort(){
                axios.post("/sys/cla/sortlist").then(
                    ({data})=>{
                        this.sortList = data.result;
                    }
                )
            },
            getbrand(){
                axios.post("/sys/brand/brandlist").then(
                    ({data})=>{
                        this.brandList = data.result;
                    }
                )
            },
            add(){

                this.csVo.commodity=this.Commodity;
                this.csVo.stocks=this.data;
                axios.post("/sys/com/add",this.csVo).then(
                    ({data})=>{
                        iview.Message.success(data.msg);
                        window.location.href="/sys/com/index";
                    }
                )

            },
            upload(row){
                this.uploadFlag = true;
                this.uploadForm.id=row.id;
            },
            /*预览*/
            handlerBeforeUpload(file){
                console.log(file);
                const ct = new FileReader();
                ct.readAsDataURL(file);//读取本地文件
                ct.onloadend=()=>{
                    this.img = ct.result;
                };
                this.clearFiles();
                this.clearFiles1();
            },
            uploadSuccess(response){
                console.log(response);
                iview.Message.success("上传yes");
                this.Commodity.pic=response.result.attachPath;
            },
           /* uploadAttach(){
                axios.post("/sys/user/uploadAttach",this.uploadForm)
                    .then(({data})=>{
                        this.uploadFlag=false;
                        iview.Message.success(data.msg);
                        this.getuserlist();
                    })
            },*/

            next () {
                if(this.mode==1||this.mode==0){
                    if (this.current == 2) {
                        this.current = 0;
                    } else {
                        this.current += 1;

                    }
                }else{
                    iview.Message.error("请选择添加方式");
                }

            },
            previous(){
                this.stockVo.stockColor=[];
                this.stockVo.stockBranch=[];
                if(this.current==1){
                    this.Commodity={};
                }

                this.current-=1
            },
            bq(){
                axios.post("/sys/com/bq",this.data).then(
                    ({data})=>{

                    }
                )
            },
            clearFiles() {
                this.$refs['upload'].clearFiles();
            },
            clearFiles1() {
                this.$refs['upload1'].clearFiles();
            }

        }
    })
</script>
</body>
</html>
